<script lang="ts" setup>
import { ref } from "vue";
import UploadAssignment from "./UploadAssignment.vue";
import { Assignment } from "../..";
import { ElMessage } from "element-plus";
import {
  getAllAssignmentAPI,
  deleteAssignmentByIDAPI,
} from "../../api/assignment";
import AssignmentItem from "../assignment/AssignmentItem.vue";
import UpdateAssignment from "./UpdateAssignment.vue";

const uploadDialog = ref(false);
const updateDialog = ref(false);
const isLoading = ref(false);
const assignments = ref<Assignment[]>([]);
const checkedAssignments = ref<Assignment[]>([]);
const checkedAssignment = ref<AssignmentItem>();

const handleChange = (val: any) => {
  checkedAssignments.value = [];
  val.forEach((item: any) => {
    checkedAssignments.value.push(item);
  });
};

const deleteCheckedData = () => {
  checkedAssignments.value.forEach((item: any) =>
    deleteAssignmentByIDAPI(item),
  );
  // checkedAssignments.value.forEach((item) => consoe.log(item));
  getData();
};

const getData = () => {
  isLoading.value = true;
  getAllAssignmentAPI()
    .then((response) => {
      if (response.status !== 200) {
        isLoading.value = false;
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      assignments.value = result.data;
      isLoading.value = false;
    });
};
getData();

const deleteMaterial = (assignment: Assignment) => {
  deleteAssignmentByIDAPI(assignment.id)
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      const code = parseInt(<string>result.code);
      if (code === 0) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getData();
      } else {
        ElMessage.error("删除失败");
      }
    });
};
</script>

<template>
  <el-dialog v-model="uploadDialog">
    <UploadAssignment
      @upload-already="
        () => {
          uploadDialog = false;
          getData();
        }
      "
    ></UploadAssignment>
  </el-dialog>
  <el-dialog v-model="updateDialog">
    <UpdateAssignment
      @update-already="
        () => {
          updateDialog = false;
          getData();
        }
      "
      :assignment="checkedAssignment"
    ></UpdateAssignment>
  </el-dialog>
  <div class="mx-4">
    <div class="mb-3">
      <el-button type="primary" @click="() => (uploadDialog = !uploadDialog)"
        >点击上传
      </el-button>
      <el-button type="danger" @click="deleteCheckedData()"
        >批量删除
      </el-button>
    </div>

    <el-table
      :data="assignments"
      border
      stripe
      max-height="480"
      ref="table"
      @selection-change="handleChange"
      v-loading="isLoading"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="gradeID" label="所属班级" />
      <el-table-column prop="deadline" label="截止时间" />
      <el-table-column fixed="right" label="操作" width="180">
        <template v-slot="scope">
          <el-button
            type="success"
            size="small"
            @click="
              () => {
                checkedAssignment = scope.row;
                updateDialog = true;
              }
            "
            >修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteMaterial(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped></style>
